import React, { useEffect, useState } from "react";
import {
  UserOutlined,
  LogoutOutlined,
  CaretDownOutlined,
} from "@ant-design/icons";
import "./App.scss";
import Doc from "./component/doc-copilot/Doc";
import { ConfigProvider, theme, Dropdown, Space } from "antd";
import zhCN from "antd/locale/zh_CN";
import enUS from "antd/locale/en_US";
import { getI18n } from "./i18n/index";

const THEME = {
  LIGHT: 1,
  DARK: 2,
};

const App: React.FC = () => {
  const [menuIndex, setMenuIndex] = useState<number>(1);
  const [dark, setDark] = useState<boolean>(true);
  const [lang, setLang] = useState("en");
  const [userInfo, setUserInfo] = useState<any>({});

  const login = () => {
    if (window.vscode) {
      window.vscode.postMessage({
        type: "login",
      });
    }
  };

  const logOut = () => {
    if (window.vscode) {
      window.vscode.postMessage({
        type: "logOut",
      });
    }
  };

  useEffect(() => {
    if (window.vscode) {
      window.vscode.postMessage({
        type: "lang",
      });
      window.vscode.postMessage({
        type: "theme",
      });
      // 查询用户是否登录
      window.vscode.postMessage({
        type: "queryHasLogin",
      });
    }
  }, []);

  const dropDownOnClick = ({ key }) => {
    if (key === "1") {
      logOut();
    }
  };

  useEffect(() => {
    window.addEventListener("message", (message) => {
      if (message.data.type === "langCallback") {
        const lang: string = message.data.data || "";
        setLang(lang.includes("zh") ? "zh" : "en");
      } else if (message.data.type === "themeCallback") {
        const kind = message.data.data || THEME.DARK;
        setDark(kind === THEME.DARK);
      } else if (message.data.type === "queryHasLoginCallback") {
        console.log("queryHasLoginCallback", message.data);
        const data = message.data.data || {};
        setUserInfo(data);
      } else if (message.data.type === "logOutCallback") {
        if (message.data.data) {
          setUserInfo({});
        }
      }
    });
  }, []);

  const menuList = [
    {
      id: 1,
      title: "DocLinter",
      component: <Doc lang={lang} />,
    },
  ];
  const index = menuList.findIndex((x) => x.id === menuIndex);
  const curComponent = index > -1 ? menuList[index].component : "";
  const i18n = getI18n(lang);

  const items = [
    {
      key: "1",
      label: i18n.logOut,
      icon: <LogoutOutlined />,
    },
  ];

  return (
    <ConfigProvider
      locale={lang === "en" ? enUS : zhCN}
      theme={{
        algorithm: [dark ? theme.darkAlgorithm : theme.defaultAlgorithm],
      }}
    >
      <div className={["webview", dark ? "dark" : "light"].join(" ")}>
        <div className="user">
          <div className="menu">
            <div>
              {menuList.map((x) => (
                <div
                  key={x.id}
                  className={[
                    menuIndex === x.id ? "active" : "",
                    "menu-item",
                  ].join(" ")}
                  onClick={() => setMenuIndex(x.id)}
                >
                  {x.title}
                </div>
              ))}
            </div>
          </div>
          <div className="user-name">
            <UserOutlined />
            {Object.keys(userInfo).length > 0 ? (
              <Dropdown menu={{ items, onClick: dropDownOnClick }}>
                <Space>
                  {userInfo.name}
                  <CaretDownOutlined />
                </Space>
              </Dropdown>
            ) : (
              <span className="login" onClick={login}>
                {i18n.loginIn}
              </span>
            )}
          </div>
        </div>
        <div className="line"></div>
        <div className="container">
          {Object.keys(userInfo).length === 0 ? (
            <div>{i18n.loginFirst}</div>
          ) : (
            curComponent
          )}
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;
